import Button from '@mui/material/Button';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import { Fragment } from 'react';

import { Status } from '../constants/status';
import NumberTool from '../libs/number-tool';
import TransactionStatus from './transaction-status';

const Transaction = (props) => {
    const onCopy = async () => {
        await navigator.clipboard.writeText(props.transaction.transactionHash);
        alert('Copied the transaction hash of ' + props.transaction.name);
    };

    const getScanURL = (): string => {
        return 'https://explorer.roninchain.com/tx/' + props.transaction.transactionHash;
    };

    return (
        <TableRow>
            <TableCell>{props.transaction.id}</TableCell>

            <TableCell>{props.transaction.name}</TableCell>
            <TableCell>
                {NumberTool.format(props.transaction.amount, props.disbursement.currency)}{' '}
                {props.disbursement.currency}
            </TableCell>
            <TableCell>
                {NumberTool.format(props.transaction.gasFee.amount, props.transaction.gasFee.token)}{' '}
                {props.transaction.gasFee.token}
            </TableCell>
            <TableCell>{props.transaction.walletAddress}</TableCell>
            <TableCell>{props.transaction.email}</TableCell>
            <TableCell>
                <TransactionStatus key={props.index} status={props.transaction.status} />
                <br />
                <small>{props.transaction.errorMessage}</small>
            </TableCell>

            <TableCell className="text-center">
                {props.transaction.status !== Status.PENDING ||
                    (props.disbursement.currency != 'SLP' && (
                        <Fragment>
                            <Button
                                className="right-20"
                                variant="outlined"
                                size="small"
                                onClick={onCopy}
                            >
                                COPY
                            </Button>
                            <Button
                                variant="outlined"
                                size="small"
                                href={getScanURL()}
                                target="_blank"
                            >
                                VIEW
                            </Button>
                        </Fragment>
                    ))}
            </TableCell>
        </TableRow>
    );
};

export default Transaction;
